<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.app{
				width:1024px;
				height:576px;
				background:url(img/a.jpg);
				margin:50px auto;
				position: relative;
			}
			.app .left{
				width:68px;
				height:68px;
				background:url(img/btn.jpg) -68px 0;
				position: absolute;
				left:0;
				top:252px;
				cursor: pointer;
			}
			.app .left:hover{
				background:url(img/btn.jpg) -68px -68px;
			}
			.app .right{
				width:68px;
				height:68px;
				background:url(img/btn.jpg);
				position: absolute;
				right:0;
				top:252px;
				cursor: pointer;
			}
			.app .right:hover{
				background:url(img/btn.jpg) 0 -68px;
			}
			.app ul{
				list-style:none;
				position: absolute;
				right:30px;
				bottom:10px;
			}
			.app li{
				float:left;
				width:30px;
				height:30px;
				background:white;
				margin-right:20px;
				border-radius: 15px;
				text-align: center;
				line-height: 30px;
				cursor: pointer;
			}
		</style>
		
		<script>
			// 轮播的图片的地址
			let banners = ['img/a.jpg', 'img/abcd.jpg', 'img/hello.jpg', 'img/yes.jpg', 'img/eee.jpg'];
			window.onload = function()
			{
				// 默认当前页面为1
				let current = 1;
				let ul = document.querySelector('ul');
				banners.forEach((banner , i) => {
					ul.innerHTML +=
					`
					<li>${i + 1}</li>
					`
				})
				
				let lis = ul.querySelectorAll('li');
				// 进入界面，默认第一个按钮是高亮
				lis[0].style.background = 'pink';
				
				let app = document.querySelector('.app');
				lis.forEach((li, i) => {
					li.onmouseover = function()
					{
						lis.forEach(n => n.style.background = 'white')
						li.style.background = 'pink';
						app.style.background = `url(${banners[i]})`;
						current = i + 1;
					}
				})
				
				let left = document.querySelector('.left');
				let right = document.querySelector('.right');
				left.onclick = function()
				{
					if (current > 1) 
					{
						current--;
					} else
					{
						current = banners.length;
					}
					app.style.background = `url(${banners[current-1]})`;
					lis.forEach(n => n.style.background = 'white')
					lis[current - 1].style.background = 'pink';
				}
				
				right.onclick = function()
				{
					if (current < banners.length) 
					{
						current++;
					} else
					{
						current = 1;
					}
					app.style.background = `url(${banners[current-1]})`;
					lis.forEach(n => n.style.background = 'white')
					lis[current - 1].style.background = 'pink';
				}
			}
		</script>
	</head>
	<body>
		<div class="app">
			<div class="left"></div>
			<div class="right"></div>
			<ul>
				
			</ul>
		</div>
	</body>
</html>